<template>
	<div>
		<cus-modal
			ref="modal"
			title="添加BOM"
			@on-visible-change="onVisibleChange"
			@onOk="onOk"
			:width="420"
		>
			<div>
				<Form
					ref="formValidate"
					:model="form"
					:label-width="120"
					:rules="ruleValidate"
				>
					<FormItem
						label="食材分类"
						prop="materialClass"
						:rules="{
							required: true,
							message: '食材分类不能为空',
							trigger: 'change'
						}"
					>
						<Select
							v-model="form.materialClass"
						
							style="width: 200px"
							placeholder="请选择食材分类"
							clearable
						>
							<Option
								:value="item.name"
								v-for="(item, index) in materialTypeList"
								:key="index"
								>{{ item.name }}</Option
							>
						</Select>
					</FormItem>

					<FormItem label="食材名称" prop="typeId">
						<cus-autoComplete
							:value.sync="form.type"
							key-label="materialName"
							key-value="materialId"
							placeholder="请输入食材名称选择食材"
							return-label="data"
							@onChange="changeTypeOption"
							:cusParams="{ foodClass: form.materialClass }"
							fncLabel="materialName"
							pageSize="size"
							currentPage="current"
							:fnc="localFoodSearch"
						></cus-autoComplete>
					</FormItem>
					<FormItem
						label="下料量(g/人份)"
						prop="weight"
						:rules="{
							required: true,
							type: 'number',
							message: '下料量不能为空',
							trigger: 'blur'
						}"
					>
						<InputNumber
							v-model="form.weight"
							clearable
							style="width: 200px"
							placeholder="请输入下料量(g/人份)"
						>
						</InputNumber>
					</FormItem>
					<FormItem label="损耗率(%)">
						<Input
							v-model="form.storageLoss"
							style="width: 200px"
							readonly
							placeholder="损耗率（选中食材后展示）"
						></Input>
					</FormItem>
					<FormItem label="折算比例(%)">
						<Input
							v-model="form.convertPro"
							style="width: 200px"
							readonly
							placeholder="折算比例（选中食材后展示）"
						></Input>
					</FormItem>
				</Form>
			</div>
			<div slot="footer">
				<div class="modal-footer">
					<cus-button size="small" class="mr_2" @onClick="onCancel"
						>取消</cus-button
					>
					<cus-button type="primary" size="small" @onClick="onOk"
						>添加</cus-button
					>
				</div>
			</div>
		</cus-modal>
	</div>
</template>

<script>
import { localFoodSearch, materialType } from '@/api/business/dishesModule'

const form = {
	materialClass: '', // 食材分类
	materialId: '', // 食材ID
	materialName: '', // 食材名称
	specification: '', // 单位
	weight: 0,
	convertPro: '', // 折算比例
	storageLoss: '', // 损耗率
	type: {
		materialName: '',
		materialId: ''
	}
}

export default {
	components: {},
	data() {
		return {
			materialTypeList: [], // 食材种类列表
			localFoodSearch: localFoodSearch,
			loading: false,
			form: this.$cu.deepClone(form),
			ruleValidate: {
				typeId: [
					{
						required: true,
						validator: (rule, value, callback) => {
							if (!this.form.type.materialId) {
								return callback(new Error('食材分类不能为空.'))
							} else callback()
						},
						trigger: 'change'
					}
				]
			},
			addType: '',
			mainId: ''
		}
	},
	mounted() {
		this.form = this.$cu.deepClone(form)
	},
	methods: {
		onVisibleChange(v) {
			this.$refs['formValidate'].resetFields()
			if (!v) this.form = this.$cu.deepClone(form)
		},
		onCancel() {
			this.$refs['modal'].show = false
		},
		show() {
			this.$refs['modal'].show = true
			this.materialTypeApi()
		},
		onOk() {
			this.$refs['formValidate'].validate((valid) => {
				if (valid) {
					this.$emit('addItem', this.$cu.deepClone(this.form))
				}
			})
		},
		// 选项切换
		changeTypeOption(option) {
			console.log(option)
			this.form.specification = option.specification
			this.form.materialName = option.materialName
			this.form.materialId = option.materialId
			this.form.convertPro = option.convertPro
			this.form.storageLoss = option.storageLoss
			this.form.materialClass = option.foodClass
		},
		// 获取食材种类
		materialTypeApi() {
			return new Promise((resolve) => {
				materialType({}).then((res) => {
					if (res.retCode === 2000) {
						this.materialTypeList = res.data
						resolve()
					}
				})
			})
		}
	}
}
</script>

<style scoped lang="less">
.card-title {
	font-size: 18px;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #202224;
	margin-bottom: 24px;
	line-height: 25px;
}

.cus-form {
	margin-top: 45px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	&-section {
		margin-right: 24px;
		margin-left: 24px;
		display: flex;
		flex-direction: column;
		margin-bottom: 24px;

		&-label {
			font-size: 16px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.85);
			line-height: 22px;
			margin-bottom: 6px;
		}
	}
}
</style>
